<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试结果</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../static/layui/css/global.css" >
    <script src="../../static/layui/layui.all.js"></script>
    <script src="../../static/jquery-3.3.1.min.js"></script>
    <style>
        .head {
            padding-left: 12px;
            background-color: white;
            width: 99%;
            height: 50px;
        }

        .current{
            background: white!important;
        }
    </style>
</head>
<body>

<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<script id="demo" type="text/html">

    <ul class="site-doc-bgcolor">
        {{#
            layui.each(d.methodList, function(index, item){
        }}
            <li class="layui-bg-gray">
                <p class="methodName" style="cursor:pointer">{{ item.methodName }}</p>
                <p hidden>{{index}}</p>
            </li>
        {{#
            });
        }}

        {{#  if(d.methodList.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>
<script id="demo1" type="text/html">
    <ul class="site-doc-bgcolor">
        {{#
             layui.each(d.methodList, function(index, item){
        }}
        <li id="methodIndex{{index}}" style="display: none;position:relative;">
            <div >
                {{#
                    layui.each(item.paramList, function(index, itemT){
                }}
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 150px;" title="Object类型传入Json格式">
                            参数{{index+1}}<br/>({{itemT.paramTypeStr}})
                        </label>
                        <div class="layui-input-block" style="margin-left: 200px;">
                            <input type="text" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                {{#
                    });
                }}
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">version</label>
                    <div class="layui-input-block" style="margin-left: 200px;">
                        <input type="text" autocomplete="off" class="layui-input" title="默认无" placeholder="默认无" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">结果</label>
                    <div class="layui-input-block" style="margin-left: 200px;">
                        <textarea placeholder="" class="layui-textarea result" style="height: 300px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="text-align: center;">
                        <button class="layui-btn" id="{{item.methodName}}">立即提交</button>
                    </div>
                </div>
            </div>
        </li>
        {{#
            });
        }}
    </ul>
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div>
    <div class="head" id="model">
        <div>
            <button type="button" class="layui-btn layui-btn-normal" value="dev">开发环境</button>
            <button type="button" class="layui-btn layui-btn-primary" value="uat">测试环境</button>
            <button type="button" class="layui-btn layui-btn-primary" value="prod">生产环境</button>
            <button type="button" class="layui-btn layui-btn-primary" value="reload">重新加载</button>
        </div>
        <hr/>
    </div>
    <div id="view" style="width: 19%;height:100%;overflow:auto;margin: 5px auto;float: left;padding-left: 15px;" lay-filter="view" class="layui-form layui-row query-list"></div>
    <div id="param" style="width: 79%;height:100%;overflow:auto;margin: 5px auto;float: right;" class="layui-form layui-row query-list"></div>
</div>

<script>
    var data = parent.interfaceData;


    $("#view").css({height:(window.innerHeight-70)+'px'})
    $("#param").css({height:(window.innerHeight-70)+'px'})

    layui.use(['form', 'laytpl'], function(){
        var form = layui.form
            ,laytpl = layui.laytpl
        ;
        var model = "dev";
        var getTpl = demo.innerHTML,
            tp2 = demo1.innerHTML,
            view = document.getElementById('view'),
            view1 = document.getElementById("param");
        laytpl(getTpl).render(data, function(html){
            view.innerHTML = html;
        });
        laytpl(tp2).render(data, function(html){
            view1.innerHTML = html;
        });
        form.render();
        form.render('select'); //刷新select选择框渲染
        form.render(null, 'view');
        form.render(null, 'param');

        var submit = function(obj,methodName){
            var $li = $(obj).parents("li");
            var index = Number($li.attr("id").replace("methodIndex",""));
            var param = {};
            param.param = [];
            param.interfaceName = data.interfaceName;
            param.methodName = methodName;
            param.paramType = [];
            param.model = model;
            if(data.methodList[index].paramList && data.methodList[index].paramList.length > 0){
                data.methodList[index].paramList.forEach(function (o) {
                    param.paramType.push(o.paramType);
                })
            }
            var $input = $li.find("input[type='text']");
            $input.each(function (i, val) {
                if ($input.length - 1 == i) {
                    param.version = $(val).val();
                } else {
                    param.param.push($(val).val());
                }
            });
            $.ajax({
                url: "/consumer/invoke",
                type: "post",
                data: JSON.stringify(param),
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                   $($li.find(".result")[0]).val(JSON.stringify(data,null,3));
                },error:function (XmlHttpRequest,options,exc) {
                    console.log(exc);
                    console.log(XmlHttpRequest);
                }
            });
            return false;
        }

        data.methodList.forEach(function (o) {
            $(document).on('click','#'+o.methodName,function(){
                return submit(this,o.methodName);
            });
        })
        $(".methodName").each(function (index,li) {
            $(li).bind("click",function () {
                var obj = $(this);
                //隐藏掉其他的参数输入框
                $("[id^='methodIndex']").hide();

                $(".methodName").parent().removeClass("current");
                obj.parent().addClass("current");

                var paramInput = $("#methodIndex"+obj.next().text());
                if(paramInput.is(":hidden")){
                    paramInput.show();
                }else {
                    paramInput.hide();
                }
            });
        });

        $("#model").find(".layui-btn").each(function (index,li) {
            $(li).bind("click",function () {
                var $obj = $(this);
                if($obj.val() == "reload"){
                    parent.loadJar();
                    return;
                }
                model = $obj.val();
                clearClass();
                $obj.removeClass("layui-btn-primary");
                $obj.addClass("layui-btn-normal")
            });
        });

        function clearClass() {
            $("#model").find(".layui-btn").each(function (index,li) {
                $(li).removeClass("layui-btn-normal");
                $(li).addClass("layui-btn-primary");
            });
        }
    });
</script>

</body>
</html>